@layer base, starlight, theme, components, utilities;

@import '@astrojs/starlight-tailwind';
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

:root {
    --sl-sidebar-width: 22rem;
    --sl-text-h2: 1.5rem;
    --sl-text-h3: 1.25rem;
    --sl-text-h4: 1.125rem;
    --sl-color-bg-nav: var(--sl-color-black);
    --sl-color-bg: var(--sl-color-black);
    --sl-color-bg-sidebar: var(--sl-color-black);
    --sl-color-hairline-shade: var(--sl-color-gray-6);
    --sl-color-accent: #bd0249;
    --sl-color-accent-high: #ff78ac;
}

img.icon {
    display: inline;
    box-shadow: none;
    margin: 0;
    width: 26px;
    height: 26px;
    transform: translate(0, 40%);
    margin-top: -16px;
    margin-left: -4px;
    margin-right: -4px;
}

.ee-badge {
    background-color: transparent;
    border: none;
    background-image: url('/ra-core/img/premium.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    display: inline-flex;
    top: 2px;
    position: relative;
}

.rcg-tab {
    margin: 0;
}

.expressive-code button.cb-fullscreen__button {
    color: var(--ec-frm-inlBtnFg);
}

/* Auth and Data Provider icons */

.providers-list img {
    width: 25px !important;
    margin: 2px 10px 2px 0px !important;
    box-shadow: none !important;
    vertical-align: middle;
    display: inline;
}
.providers-list ul {
    padding-left: 0;
}
.providers-list ul > li {
    list-style-type: none;
}
.providers-list .flex {
    display: flex !important;
    text-align: -webkit-match-parent !important;
    align-items: center !important;
    flex-wrap: wrap;
    margin: 0;
}
.providers-list .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: DarkGray;
    width: 25px;
    height: 25px;
    margin: 2px 10px 2px 0px;
    border-radius: 100%;
    font-size: 12px;
}

/* 
   Improve props table layout
*/
.sl-markdown-content table {
    font-size: 0.8rem;
}
.sl-markdown-content table code {
    font-size: 0.8rem;
}
.sl-markdown-content table tr td:has(code) {
    max-width: 140px;
}
.sl-markdown-content table tr td code {
    overflow-wrap: break-word;
}

a.enterprise {
    position: relative;
    padding-right: 26px;
}

a.enterprise .sl-badge {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

a.enterprise span:not(.sl-badge)::after {
    content: '';
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 6px;
    right: 6px;
}

a.enterprise span:not(.sl-badge)::after {
    background-image: url('/public/premium.svg');
}
a[aria-current='page'].enterprise span:not(.sl-badge)::after {
    background-image: url('/public/premium.svg');
}

[data-theme="light"] a[aria-current="page"].enterprise span:not(.sl-badge)::after {
    background-image: url('/public/premium-white.svg');
}

[data-theme="dark"] a[aria-current="page"].enterprise span:not(.sl-badge)::after {
    background-image: url('/public/premium-black.svg');
}
